@import './base.less';
@import './normalize.less';
// 在less用于初始化文件，最后作用于index.css
//在html引入无法识别
//index.less -通过less插件转译为index.css;

@rootSize: 3.75vw;
//设计稿为375px,参考型号为iphone 6/7/8;
//VW布局只需要把单位转为VW接口，不需要关注高度VH;
.color {
    color: #fff;
}


// head  --s--

body {
    background-color: #f6f6f6;
}

.head {
    width: 100%;
    height: (65 / @rootSize);
    background-color: #324df4;
    padding-top: (16 / @rootSize);


    .search {
        display: flex;
        justify-content: center;
        align-items: center;
        justify-content: space-evenly;
        width: 100%;
        height: (44 / @rootSize);


        span,
        i {
            width: (30 / @rootSize);
            height: (30 / @rootSize);
            color: #fff;
            text-align: center;
            line-height: (30 / @rootSize);
        }

        .content {
            position: relative;
            width: (289 / @rootSize);
            height: (30 / @rootSize);
            color: #fff;
            border-radius: (15 / @rootSize);
            background-color: #677bf7;


        }

        em {
            height: (30 / @rootSize);
            // background-color: aqua;
            margin-left: (5 / @rootSize);
        }

        input {
            position: absolute;
            top: 0;
            // left: (12 / @rootSize);
            width: 50%;
            height: (30 / @rootSize);
            font-size: (15 / @rootSize);
            border: 0;
            border-radius: (15 / @rootSize);
            // background-color: #677bf7;
            outline: none;
            // margin-left: (10 / @rootSize);
            background-color: #677bf7;
        }

    }
}


// banner  ----s---
.banner {
    width: (351 / @rootSize);
    height: (164 / @rootSize);
    margin: (12 / @rootSize);

    img {
        width: 100%;

    }
}


//nav  ----s---  
.nav {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    align-items: center;
    justify-content: center;

    width: (351 / @rootSize);
    height: (143 / @rootSize);
    background-color: #ffffff;
    box-shadow: 0 (5 / @rootSize) (5 / @rootSize) 0 rgba(0, 161, 124, 0.1);
    border-radius: (5 /  @rootSize);
    margin: (12 / @rootSize);


    div {
        width: 25%;


        .iconfont {
            width: (50 / @rootSize);
            height: (50 / @rootSize);
            border-radius: 50%;
            font-size: (30 / @rootSize);
            background-color: lightsteelblue
        }


        p {
            font-size: (13 / @rootSize);
            color: #333333;
            margin-top: (5 / @rootSize);
        }

    }
}

// <!-- 今日直播         -s-->
.live {
    position: relative;
    display: flex;
    height: (30 / @rootSize);

    margin: (12 / @rootSize);
    line-height: (30 / @rootSize);

    em {

        width: (3 / @rootSize);
        height: (13 / @rootSize);
        background-color: #324df4;
        margin: (7 / @rootSize) (5 / @rootSize) (5 / @rootSize) 0;


    }

    h3 {
        font-size: (16 / @rootSize);
        color: #333;
        margin-left: (5 / @rootSize);
    }

    span {
        position: absolute;
        right: 0;
        font-size: (12 / @rootSize);
        color: #999999;

    }
}



//ad 广告页
.ad {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    justify-content: space-evenly;
    width: (351 / @rootSize);
    height: (199 / @rootSize);
    background-color: #ffffff;
    border-radius: (3 / @rootSize);
    margin: (12 / @rootSize);


    div {
        width: (157 / @rootSize);
        height: (105 / @rootSize);
        background-blend-mode: normal,
            normal;
        border-radius: (4 / @rootSize);
        ;
        text-align: center;
        margin-top: (10 / @rootSize);

        h4 {
            height: (30/ @rootSize);
            font-size: (15 / @rootSize);
            color: #ffffff;
            line-height: (30 / @rootSize);
        }

        h5 {
            height: (35 / @rootSize);
            font-size: (13 / @rootSize);
            color: #d2ffee;
            line-height: (35 / @rootSize);

        }

        span {
            height: (50 / @rootSize);
            color: #ffffff;
            font-size: (11 / @rootSize);
            line-height: (50 / @rootSize);
        }

        i {
            width: (14 / @rootSize);
            height: (14 / @rootSize);
            color: #2fe28e;
            border-radius: 50%;
            margin-left: (14 / @rootSize);
            background-color: #fff;
        }

        &:nth-child(1) {
            background-image: linear-gradient(-30deg,
                    #ffc205 0%,
                    #ffa332 100%),
                linear-gradient(#ffa332,
                    #ffa332);
            background-blend-mode: normal,
                normal;
            border-radius: (4 / @rootSize);
        }

        &:nth-child(2) {
            background-image: linear-gradient(-30deg,
                    #37e890 0%,
                    #11cf89 100%),
                linear-gradient(#12d08a,
                    #12d08a);

        }

        &:nth-child(3) {
            background-image: linear-gradient(-30deg,
                    #ff9756 0%,
                    #fe712a 100%),
                linear-gradient(#12d08a,
                    #12d08a);
            background-blend-mode: normal,
                normal;
            border-radius: (4 / @rootSize);
        }

        &:nth-child(4) {
            background-image: linear-gradient(-30deg,
                    #60c9ff 0%,
                    #30aefb 100%),
                linear-gradient(#ffa332,
                    #ffa332);
            background-blend-mode: normal,
                normal;
            border-radius: (4 / @rootSize);
        }

    }
}

// footer ----s---
.footer {
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    bottom: 0;
    left: 0;
    width: 100%;
    height: (50 / @rootSize);
    background-color: #fff;
    box-shadow: inset 0 (1 / @rootSize)  (1 / @rootSize)  0 #e4e4e4;

    div {
        width: 25%;
        text-align: center;
        // 记住每个子盒子的100%分配
        //按100% 每个子盒子占多少!

        &:nth-child(1) {
            color: #324df4;

        }
    }
}